<template>
  <div >
    <img src="./assets/logo.jpg" :style="{ ...logoStyle }" alt="logo" />
    <el-card :style="loginFormStyle">
      <div slot="header" class="clearfix">
        <span>登录</span>
      </div>
      <el-form
        :model="loginForm"
        :rules="rules"
        status-icon
        ref="loginForm"
        label-width="80px"
        @validate="loginValidate"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="loginForm.username"
            suffix-icon="el-icon-user"
            autocomplete="off"
            @keyup.enter.native="login"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            show-password
            autocomplete="off"
            @keyup.enter.native="login"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login" :disabled="btnSubmitDisabled"
            >登录</el-button
          >
          <el-link
            type="primary"
            style="float:right;line-height:16px;margin-top:10px;margin-right:10px;"
            href="#/register"
            >注册</el-link
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
const request = require("../../utils/request");
const api = request.default;
export default {
  data() {
    return {
      btnSubmitDisabled: true,
      loginValid: {
        username: false,
        password: false,
      },
      bodyHeight: document.documentElement.clientHeight,
      bodyWidth: document.documentElement.clientWidth,
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 32,
            message: "长度在 3 到 32 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 32,
            message: "长度在 3 到 32 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    bodyStyle() {
      return bodyStyle;
    },
    logoStyle() {
      return {
        width: "64px",
        height: "64px",
      };
    },
    titleStyle() {
      return {};
    },
    loginFormStyle() {
      const loginWidth = 400;
      return {
        width: loginWidth + "px",
        backgroundColor: "#fff",
        borderRadius: "5px",
        position: "absolute",
        left:
          this.bodyWidth > 800
            ? this.bodyWidth / 2 - loginWidth / 2 + "px"
            : 400 - loginWidth / 2 + "px",
        top: this.bodyHeight > 600 ? this.bodyHeight / 2 - 150 + "px" : "100px",
      };
    },
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        that.bodyHeight = window.fullHeight;
        window.fullWidth = document.documentElement.clientWidth;
        that.bodyWidth = window.fullWidth;
      })();
    };
  },
  methods: {
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (!valid) {
          this.$alert("请正确填写用户名或密码", "错误", {
            type: "error",
            confirmButtonText: "确定",
          });
          return false;
        } else {
          //验证用户是否存在
          api.post('api/login',this.loginForm).then(data=>{
            const {result,success,code,msg} = data
            if(success) {
              const token = result.token
              window.sessionStorage.removeItem('token');
              window.sessionStorage.setItem("token", token);
              window.location.href = "/main.html";
            }else{
              this.$alert(`错误代码:${code},${msg}`, "错误", {
                type: "error",
                confirmButtonText: "确定",
              });
            }
          })
        }
      });
    },
    loginValidate(e, valid) {
      this.loginValid[e] = valid;
      let result = false;
      for (let key in this.loginValid) {
        if (this.loginValid[key] === false) {
          result = true;
          break;
        }
      }
      this.btnSubmitDisabled = result;
    },
  },
  watch: {
    "loginForm.username"(val) {
      this.$refs.loginForm.validateField("username");
    },
    "loginForm.password"(val) {
      this.$refs.loginForm.validateField("password");
    },
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  background-color: #0a1926;
  padding: 0px;
  margin: 0px;
}
</style>
